<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<!-- 视口标签 -->
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>首页</title>
		<!-- 引入公共的CSS样式 -->
		<link rel="stylesheet" href="css/base.css">
		<!-- 引入当前页的CSS样式 -->
		<link rel="stylesheet" href="css/home.css">
	</head>
	<body>
		<!-- 顶部 -->
		<div class="header">
			<img src="img/list.svg" alt="" class="list">
			<div class="main">
				<img src="img/listen.png" alt="0">
				<img src="img/look.png" alt="1">
				<img src="img/sing.png" alt="2">
			</div>
			<img src="img/search_index.png" alt="" class="search">
		</div>
		<div class="container">
			<div style="display: block;">
				<!-- 用户部分 -->
				<div class="f1">
					<img src="img/avatar.jpg" alt="" class="avatar">
					<div class="member">
						<p>胡萝北 <img src="img/diamond.png" alt=""></p>
						<p>
							<span>LV.5</span>
							听歌15302分钟
						</p>
					</div>
					<img src="img/mail.png" alt="" class="mail">
				</div>
				<!-- f2 -->
				<div class="f2">
					<div>
						<img src="img/Computer.svg" alt="">
						<p>本地音乐</p>
						<p>148</p>
					</div>
					<div>
						<img src="img/Heart_index.svg" alt="">
						<p>喜欢.歌单</p>
						<p>35</p>
					</div>
					<div>
						<img src="img/Dwonload_index.svg" alt="">
						<p>下载</p>
						<p>2</p>
					</div>
					<div>
						<img src="img/Time.svg" alt="">
						<p>最近</p>
						<p>100</p>
					</div>
				</div>
				<!-- f3 -->
				<div class="f3">
					<div>
						<img src="img/icon1.png" alt="">
						<p>乐库</p>
					</div>
					<div>
						<img src="img/icon2.png" alt="">
						<p>乐库</p>
					</div>
					<div>
						<img src="img/icon3.png" alt="">
						<p>乐库</p>
					</div>
					<div>
						<img src="img/icon4.png" alt="">
						<p>乐库</p>
					</div>
					<div>
						<img src="img/icon5.png" alt="">
						<p>乐库</p>
					</div>
					<div>
						<img src="img/icon6.png" alt="">
						<p>乐库</p>
					</div>
				</div>
				<!-- f4 -->
				<div class="f4">
					<span>推广</span>
					<div>
						<ul>
							<li>这是标题1</li>
							<li>这是标题2</li>
							<li>这是标题3</li>
							<li>这是标题4</li>
							<li>这是标题5</li>
							<li>这是标题1</li>
							<li>这是标题2</li>
							<li>这是标题3</li>
						</ul>
					</div>
				</div>
				<!-- f5 播放器 -->
				<div class="f5">
					<img src="img/pic.jpg" alt="" class="pic">
					<div class="play-box">
						<div class="play">
							<!-- 已经播放进度 -->
							<div></div>
							<!-- 小圆球 -->
							<span></span>
						</div>
						<div class="play-info">
							<div>
								<p>日落大道</p>
								<p>梁博</p>
							</div>
							<img src="img/play_index.svg" alt="">
							<img src="img/next_index.svg" alt="">
							<img src="img/Layout.svg" alt="">
						</div>
					</div>
				</div>
			</div>
			<div>这是看的内容</div>
			<div>这是唱的内容</div>
		</div>
		
		
		<!-- 导航列表 -->
		<div class="nav"></div>
	</body>
</html>

<!-- JS的书写位置 -->
<script>
	// 声明变量记录当前的状态
	var open = false
	// 从整个网页文档(document)，通过选择器来查找列表按钮
	// 给列表按钮绑定点击事件
	document.querySelector('.list').onclick = function(){
		// 点击后要执行的代码
		// alert()
		// 查找到类名为nav标签，让css属性中的left值为0
		// document.querySelector('.nav').style.left = 0
		// 如果open是true说明开，否则是关
		if(open==true) {// 如果开
			// 隐藏
			document.querySelector('.nav').style.left = '-40vw'
			// 状态变为关
			open = false
		}else{// 如果关
			//显示
			document.querySelector('.nav').style.left = 0
			// 状态变为开
			open = true
		}
	}

	// 从网页文档中查找到类main下所有img
	var arr = document.querySelectorAll('.main>img')
	// 找到所有container下div
	var divs = document.querySelectorAll('.container>div')
	// 循环获取每一个img标签
	for(var i=0; i<arr.length; i++) {
		// console.log(i, arr[i])
		// 给每个img绑定点击
		arr[i].onclick = function() {
			// 将所有的内容都隐藏
			for(var i=0;i<divs.length;i++) {
				// 让每个div的css属性中display为none
				divs[i].style.display = 'none'
			}
			
			// 让对应的显示
			// this 当前单击的标签
			// alert(this.alt)
			divs[this.alt].style.display = 'block'
		}
	}
	

</script>
